<template>
  <header class="header">
    <!-- 头部的第一行 -->
    <div class="top">
      <div class="container">
        <div class="loginList">
          <p>尚品汇欢迎您！</p>
          <p v-if="userInfo.name">您好，欢迎&nbsp;{{userInfo.name}}&nbsp;&nbsp; <button @click="logout">退出</button></p>
          <p v-else>
            <span>请</span>
            <router-link to="/login">登录</router-link>
            <router-link to="/register" class="register">免费注册</router-link>
          </p>
        </div>
        <div class="typeList">
          <a href="###">我的订单</a>
          <router-link to="/shopcart">我的购物车</router-link>
          <a href="###">我的尚品汇</a>
          <a href="###">尚品汇会员</a>
          <a href="###">企业采购</a>
          <a href="###">关注尚品汇</a>
          <a href="###">合作招商</a>
          <a href="###">商家后台</a>
        </div>
      </div>
    </div>
    <!--头部第二行 搜索区域-->
    <div class="bottom">
      <h1 class="logoArea">
        <router-link class="logo" title="尚品汇" to="/home" >
          <img src="./images/logo.png" alt="">
        </router-link>
      </h1>
      <div class="searchArea">
        <form action="###" class="searchForm">
          <input type="text" id="autocomplete" v-model="keyword" class="input-error input-xxlarge" />
          <button class="sui-btn btn-xlarge btn-danger" @click="btnSeach" type="button">搜索</button>
        </form>
      </div>
    </div>
  </header>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "Header",
  data(){
    return {
      keyword:''  // 这个属性名要和接口地址的参数尽量保持一致
    }
  },
  computed:{
    ...mapState('user',['userInfo'])
  },
  methods:{
    btnSeach(){
              //   当多次单击搜索按钮，要跳转到的路径是相同路径的时候，浏览器控制台会报错
              //   第1种解决方案  在错误的回调当中，什么都不做，这样就可以规避掉错误提示
              //   this.$router.push('/search',()=>{console.log('跳转成功了...')},error=>{})

              //   第2种解决方案
              //   this.$router.push('/search').catch(()=>{console.log('统一处理这个错误提示...');})
              //   this.$router.push('/search').catch(()=>{})

              //   第3种解决方案 降低vue-router的版本 在之前一直使用2.X的场景下，突然升级到了3.1.0
              //   但是对于今天的我们来说，这种降低版本的方案就不推荐

              // 4. 如果想在其它组件中使用编程式导航也不报错的话，需要进行一个统一处理
              // 由于在路由对象的原型对象上对象push和replace方法统一进行了重写，此时直接使用即可
              //   this.$router.push('/search')

              //   console.log(this.$route);
              //   const {query} = this.$route
      // 发送请求的时候，携带参数 
      this.$router.push({
        name:'search',
        query:{
          ...query,
          // 如果关键词是空的话，后要一定要加上一个短路运算undefined 
          // 因为路由跳转的时候，会将值为undefined的那一项自动过滤掉
          // keyword: this.keyword || undefined
        },
        // 将关键词添加成params参数或是路径参数
        params:{keyword: this.keyword || undefined}
      })

      // console.log(this.$route);
      // 清空输入框
      // this.keyword = ''
    },
    // 2. 登出
    logout(){
     this.$store.dispatch('user/userLogout')
    }
  },
  mounted(){
    // 组件挂载完毕，就要注册一个全局事件
    this.$bus.$on('remove-keyword',()=>{
      // 清空输入框
      this.keyword = ''
    })
  },
  beforeDestroy(){
    // 在组件销毁之前，一定要解绑事件
     this.$bus.$off('remove-keyword')
  }
};
</script>

<style lang="less" scoped>
.header {
  & > .top {
    background-color: #eaeaea;
    height: 30px;
    line-height: 30px;

    .container {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      .loginList {
        float: left;

        p {
          float: left;
          margin-right: 10px;

          .register {
            border-left: 1px solid #b3aeae;
            padding: 0 5px;
            margin-left: 5px;
          }
        }
      }

      .typeList {
        float: right;

        a {
          padding: 0 10px;

          & + a {
            border-left: 1px solid #b3aeae;
          }
        }
      }
    }
  }

  & > .bottom {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;

    .logoArea {
      float: left;

      .logo {
        img {
          width: 175px;
          margin: 25px 45px;
        }
      }
    }

    .searchArea {
      float: right;
      margin-top: 35px;

      .searchForm {
        overflow: hidden;

        input {
          box-sizing: border-box;
          width: 490px;
          height: 32px;
          padding: 0px 4px;
          border: 2px solid #ea4a36;
          float: left;

          &:focus {
            outline: none;
          }
        }

        button {
          height: 32px;
          width: 68px;
          background-color: #ea4a36;
          border: none;
          color: #fff;
          float: left;
          cursor: pointer;

          &:focus {
            outline: none;
          }
        }
      }
    }
  }
}
</style>